<template>
  <div class="page">
    <section class="body">
      <!-- <p class="login-page">登录</p> -->
      <!-- <div class="img-box">
                <img class="logo" :src="proData&&api+proData.login_logo" alt="">
      </div>-->
      <form class="tj-form">
        <img src="../../assets/images/login.png" class="login-top">
        <div class="form-item">
          <div class="form-item-box">
            <!-- <img class="icon-mobile" src="../../assets/images/icon-mobile.png" /> -->
            <span class="mobile-before-code">账号</span>
            <input
              type="text"
              placeholder="请輸入手机号"
              v-model="formData.account"
              oninput="if(value.length>11)value=value.slice(0,11)"
            />
          </div>
        </div>

        <!-- <div class="form-item pwd-box">
          <input type="password" placeholder="8-12位（不能全是数字或字母）" v-model="formData.password" />
        </div>-->
        <div class="form-item">
          <div class="form-item-box">
            <!-- <img class="icon-mobile" src="../../assets/images/icon-mobile.png" /> -->
            <span class="mobile-before-code">密码</span>
            <input type="password" placeholder="8-12位（不能全是数字或字母）" v-model="formData.password" />
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-box">
            <input
              type="text"
              placeholder="请輸入图中的验证码"
              v-model="formData.captcha"
              maxlength="4"
              style="width:40%"
            />
            <img
              class="btn img-code"
              :src="api+'/api/Captcha/get?identifier='+randomCode"
              alt
              @click="getRandom()"
            />
          </div>
        </div>
        <!-- <p class="other">
          <a @click="toRegister">注册</a>
          <a @click="backPwd">找回密码</a>
        </p>-->
        <div class="footer">
          <p class="other">
            <a @click="toRegister">注册</a>
            <a @click="backPwd">找回密码</a>
          </p>
          <button type="button" class="btn-submit" @click="login">登录</button>
        </div>
        <!-- <button type="button" class="btn-submit btn-download" @click="login">登录</button> -->
        <!-- <button type="button" class="btn-submit btn-to-login" @click="goToDownload">下载 App</button> -->
      </form>
      <div class="download" @click="goToDownload">
        <img src="../../assets/images/logo.png" alt />
        <div class="tips">下载App</div>
      </div>
      <!-- <button type="button" class="btn-submit btn-to-login" @click="goToDownload">下载 App</button> -->
      <!-- <p class="other"><a @click="toScan">扫一扫注册</a> <a @click="backPwd">找回密码</a></p> -->
      <!-- <p class="other"><a @click="actionSheet">{{isApp?'扫一扫注册':''}}</a> <a @click="backPwd">找回密码</a></p> -->
    </section>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { Init, Base } from '@/server/server.js';
import { Util, Load, HB, Secret } from '@/assets/commonjs/utils.js';
import { mapGetters, mapMutations } from 'vuex';
export default {
  data() {
    return {
      formData: {
        account: null,
        password: null,
        identifier: null,
        captcha: null,
      },
      imgCode: null,
      randomCode: null,
      barcode: null,
      scan: null,
      isApp: false
    }
  },
  created() {
    this.initData();
  },
  mounted() {
    this.getRandom();
    this.getData();
  },
  computed: {
    ...mapGetters(['api', 'proData'])
  },
  methods: {
    ...mapMutations(['saveProData', 'saveUserID', 'saveUserInfo']),
    initData() {
      mui.init({
        swipeBack: true //启用右滑关闭功能
      });

    },
    /**
     * 去注册
     */
    toRegister() {
      this.$router.push({ name: 'Register' })
    },
    /**
     * 找回密码
     */
    backPwd() {
      this.$router.push({ name: 'BackPwd' })
    },
    /**
     * 登录
     */
    login() {
      let params = this.formData;
      // console.log(params);
      // return ;
      let msg = Util.isValidate(params);
      if (msg) {
        mui.toast(msg);
        return;
      }
      Load.loadStart(this);
      Init.login(params).then((res) => {
        mui.toast(res.msg);
        if (res.code == 1) {
          let InfoData = JSON.parse(Secret.decrypt(res.data));

          // localStorage.setItem('user_id',res.data.id);
          this.saveUserInfo(InfoData);
          this.saveUserID(InfoData.id);
          localStorage.setItem('userInfo', res.data);
          localStorage.setItem('cookie', InfoData.token);
          setTimeout(() => {
            Load.loadEnd(this);
            this.$router.replace({ name: 'index' })
          }, 500);
        } else {
          setTimeout(() => {
            Load.loadEnd(this);
            return;
          }, 500);
        }
      })
    },
    /**
     * 扫码选项  相机 相册
     */
    actionSheet() {
      let _this = this;
      try {
        plus.nativeUI.actionSheet({
          // title:"Plus is ready!",
          cancel: "取消",
          buttons: [
            {
              title: "相机"
            }, {
              title: "相册"
            }
          ]        },
          function (e) {
            console.log("User pressed: " + e.index);
            if (e.index == 1) {
              _this.toScan();
            } else {
              _this.selectGallery();
            }
          });

      } catch (e) { }
    },
    /**
     * 随机标识key
     */
    getRandom() {
      let random1 = parseInt(Math.random(0, 1) * 100000000);
      let random2 = parseInt(Math.random(0, 1) * 100000000);
      let str = 'abcdd';
      // return  random1+'abcdd'+random2;
      this.randomCode = random1 + 'abcdd' + random2 + '-' + new Date().getTime();
      this.formData.identifier = this.randomCode;
    },
    /**
     * 相册扫码
     */
    selectGallery() {
      let _This = this;
      HB.picForGallery(_This, res => {
        Load.loadStart(_This);
        plus.downloader.createDownload(_This.api + res, { filename: "_doc/images/" }, function (d, status) {
          if (status == 200) {
            plus.barcode.scan(d.filename, function (type, result) {
              Load.loadEnd(_This);
              plus.nativeUI.confirm("确定跳转?", function (e) {
                if (e.index == 0) {
                  plus.runtime.openURL(JSON.parse(result));
                }
              });
            }, function (e) {
              console.log("Scan failed: " + JSON.stringify(e));
            });
          } else {
            console.log("下载图片文件失敗！");
          }
          plus.nativeUI.closeWaiting();
        }).start();
      })
    },
    /**
     * 相机扫码
     */
    toScan() {
      let _This = this;
      if (!this.barcode) {
        this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
          top: '100px',
          left: '0px',
          width: '100%',
          height: '500px',
          position: 'static'
        });
        this.barcode.onmarked = _This.onmarked;
        plus.webview.currentWebview().append(this.barcode);
      }
      this.barcode.start();
      // this.scan = new plus.barcode.Barcode('bcid');
      // this.scan.onmarked = this.onmarked();
      // this.scan.start();
    },
    /**
     * 扫码回调
     */
    onmarked(type, result) {
      var text = '未知: ';
      switch (type) {
        case plus.barcode.QR:
          text = 'QR: ';
          break;
        case plus.barcode.EAN13:
          text = 'EAN13: ';
          break;
        case plus.barcode.EAN8:
          text = 'EAN8: ';
          break;
      }
      if (result) {
        // alert( text+result );
        this.barcode.close();
        try {
          if (plus) {
            mui.confirm('确定跳转', actions => {
              if (actions.index == 0)
                plus.runtime.openURL(result);

            })
          }
        } catch (e) {
          mui.confirm('确定跳转', actions => {
            if (actions.index == 1)
              plus.runtime.openURL(result);
          })
        }
      }
    },
    /**
     * 下载
     */
    goToDownload() {
      this.$router.push({ name: 'Download' })
    },
    /**
     * 项目基础信息
     */
    async getData() {
      await Base.getData().then(res => {
        if (res.code == 1) {
          this.saveProData(res.data);
          localStorage.setItem('proData', JSON.stringify(res.data));
        } else
          mui.toast(res.msg || '加載項目信息失敗！')
      })
    }
  },
}
</script>

<style scoped lang="less">
@import "~link-less";

.login-page {
  margin: 150px 50px;
  color: #fff;
  font-size: 46px;
}
.icon-mobile {
  width: 31px;
  height: 38px;
  margin-left: 20px;
}
.mobile-before-code {
  font-size: 26px;
  color: #fff;
  margin-left: 15px;
  margin-right: 10px;
}
.form-item-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-item-box input {
  background-color: unset;
  color: #fff;
  // height:30px;
  border: none;
  margin: 0;
  padding: 0 10px;
  border-bottom: solid 1px #eee;
  box-sizing: border-box;
  width: 60%;
  font-size: 18px;
}
input {
  border-radius: 0;
}
.form-item input::-webkit-input-placeholder {
  color: #dddddd;
}
.pwd-box {
  margin: 80px 25px 0 25px;
}
.pwd-box input {
  margin: 0;
  height: 70px;
  background-color: unset;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  color: #fff;
}
.img-code {
  margin-bottom: 20px !important;
}
.page {
  background: #fff url("../../assets/images/dl_BJ.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
}
.body {
  // background-color: rgba(0,0,0,0.7);
  background-size: 100% 100%;
  .img-box {
    .display-flex();
    justify-content: center;
    align-items: center;
    .logo {
      margin: 60px 0;
      height: 180px;
    }
  }
  .tj-form {
    width: 690px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border-radius: 20px;
    box-sizing: border-box;
    position: absolute;
    bottom: 280px;
    .login-top {
      width: 190px;
      height: 170px;
      position: absolute;
      top: -125px;
      left: 50%;
      transform: translateX(-50%);
    }
    .btn-white {
      background-color: whitesmoke;
      color: #333;
      font-size: 40px;
      letter-spacing: 5px;
      font-family: fantasy; //monospace fantasy
    }
  }
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .other {
    .display-flex();
    justify-content: space-between;
    margin: 0 @margin-primary @margin-primary;
    color: white;
    font-size: 24px;
    margin-top: 25px;
    a {
      padding: 10px 20px;
    }
  }
  .btn-submit {
    width: 110px;
    height: 40px;
    border-radius: 5px;
    color: black;
    background-color: #ffba00;
  }
  .download {
    position: fixed;
    top: 300px;
    right: 20px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    img {
      width: 100px;
    }
  }
  .btn-download {
    background: -webkit-linear-gradient(red, blue);
    background: linear-gradient(to right, #46cc08, #0cc469);
  }
  .btn-to-login {
    border: solid 1px #46cc08;
    margin-top: 50px;
  }
}
</style >
